
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>attribute</title>
</head>
<body>

<img id="logo" src="../logo1.jpg" alt="jQuery logo" class="img-jquery" title="jQuery logo" />

<input type="checkbox" id="check"
       tabindex="1" style="width:50px; height: 50px;"
       title="Check this!" description="just a checkbox" />

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {

        var checkbox = document.getElementById('check');
//        attributes:值为string;
//        properties:值为string,boolean,number,object
        //        console.log(checkbox.getAttribute('tabIndex'));
        //        console.log(checkbox.tabIndex);
        //        console.log(typeof checkbox.getAttribute('tabIndex'));
        //        console.log(typeof checkbox.tabIndex);
        //        console.log(checkbox.getAttribute('style'));
        //        console.log(checkbox.style);
        //        console.log(typeof checkbox.getAttribute('style'));
        //        console.log(typeof checkbox.style);
        //
        //        console.log(checkbox.attributes);

        //对属性设置一些值
        console.log(checkbox.getAttribute('title') === checkbox.title);
        checkbox.title = 'New title!';
        console.log(checkbox.getAttribute('title') === checkbox.title);
        checkbox.setAttribute('title', 'Another title!');
        console.log(checkbox.getAttribute('title') === checkbox.title);


        console.log(checkbox.getAttribute('checked'));
        console.log(checkbox.checked);

        //如果attribute是本来在DOM对象中就存在的，但是类型是boolean，那么attributes和properties的值不会同步
        checkbox.checked = true;
        console.log(checkbox.getAttribute('checked'));//特性值为空
        console.log(checkbox.checked);//属性值为布尔值

        //如果attributes不是DOM对象内建的属性，attributes和properties的值不会同步
        console.log(checkbox.getAttribute('description'));//特性发生改变
        console.log(checkbox.description);//属性没有值

        checkbox.description = '123';
        console.log(checkbox.getAttribute('description'));
        console.log(checkbox.description);


        checkbox.name = 'check';
        console.log(checkbox.getAttribute('name'));
        console.log(checkbox.name);
        checkbox.setAttribute('name', 'Another name!');
        console.log(checkbox.getAttribute('name'));
        console.log(checkbox.name);


        checkbox.style = "width:150px; height: 150px;";
        console.log(checkbox.getAttribute('style'));
        console.log(checkbox.style);
        checkbox.style = {
            width: 200,
            height: 200
        };
        console.log(checkbox.getAttribute('style'));
        console.log(checkbox.style);



        var img = document.getElementById('logo');

        console.log(img.attributes);

        img.src = '../logo.jpg';

        console.log(img.src);
        console.log(img.getAttribute('src'));

        //console.log(img.class);
        console.log(img.getAttribute('class'));
        console.log(img.className);  //获取属性的时候用classname；获取特性的时候用class


    });
</script>
</body>
</html>